<!doctype html>
<html>
	<head>
		<title>detached scope problem</title>
		<link rel="stylesheet" href="/mp.css"></link>
		<link rel="stylesheet" href="../../demo/css/jsPlumbDemo.css"></link>
		<link rel="stylesheet" href="../../demo/css/demo.css"></link>		
		<style type="text/css">
		.dropHover { border:1px dotted red; }
.dragActive { border:2px dotted orange; }
._jsPlumb_endpoint { z-index:100; }
#window1 { left:2em; top:2em; }
#window2 { left:40em; top:2em; }
#window3 { left:2em; top:26em; }
#window4 { left:40em; top:26em; }
		</style>
	</head>
	<body onunload="jsPlumb.unload();">
	
		<div class="window" id="window1">WINDOW 1</div>
		<div class="window" id="window2">WINDOW 2</div>
		<div class="window" id="window3">WINDOW 3</div>
		<div class="window" id="window4">WINDOW 4</div>	
	    
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
		

<!-- support lib for bezier stuff -->
		<script type="text/javascript" src="../../js/lib/jsBezier-0.2-min.js"></script>
		<!-- main jsplumb engine -->
		<script type="text/javascript" src="../../js/1.3.2/jsPlumb-1.3.2-RC1.js"></script>
		<!-- connectors, endpoint and overlays  -->
		<script type="text/javascript" src="../../js/1.3.2/jsPlumb-defaults-1.3.2-RC1.js"></script>
		<!-- SVG renderer -->
		<script type="text/javascript" src="../../js/1.3.2/jsPlumb-renderers-svg-1.3.2-RC1.js"></script>
		<!-- canvas renderer -->
		<script type="text/javascript" src="../../js/1.3.2/jsPlumb-renderers-canvas-1.3.2-RC1.js"></script>
		<!-- vml renderer -->
		<script type="text/javascript" src="../../js/1.3.2/jsPlumb-renderers-vml-1.3.2-RC1.js"></script>
		<!-- jquery jsPlumb adapter -->
		<script type="text/javascript" src="../../js/1.3.2/jquery.jsPlumb-1.3.2-RC1.js"></script>					            	
		<script type="text/javascript">
			$(function() {

				// chrome fix.
				document.onselectstart = function () { return false; };
				
				jsPlumb.DefaultDragOptions = { cursor: 'pointer', zIndex:2000 };
				
				var e1 = {
					anchor:[1,0.5,1,0],
					isSource:true,
					isTarget:true,					
					dragOptions:{ scope:"dragType1" },
					dropOptions:{
						scope:"dragType2",
						hoverClass:'dropHover',
						activeClass:'dragActive'
					},
					connectorStyle:{strokeStyle:"rgb(145,145,145)", lineWidth:7}
				};
				
				var e2 = {
					anchor:[0,0.5,-1,0],
					isSource:true,
					isTarget:true,
					dragOptions:{
						scope:"dragType2"
					},
					dropOptions:{
						scope:"dragType1",
						hoverClass:"dropHover",
						activeClass:'dragActive'
					},
					connectorStyle:{strokeStyle:"rgb(145,145,145)", lineWidth:7}
				};

				var e3 = {
						anchor:[0.5,1,0,1],
						isSource:true,
						isTarget:true,
						scope:"dragType1",
						connectorStyle:{strokeStyle:"rgb(45,145,145)", lineWidth:7}
					};
				
				jsPlumb.addEndpoint("window1", e1);
				jsPlumb.addEndpoint("window3", e1);
				jsPlumb.addEndpoint("window2", e2);
				jsPlumb.addEndpoint("window4", e2);

				jsPlumb.addEndpoint("window1", e3);
				
			});
				
		</script>

	</body>
</html>
